<template>
  <page-wrap back title="面试结果" hide-tab stay-still :hideSafeArea="true" :bg-color="uNavColor" >
    <InterViewNavbg/>
    <InterviewCell :itemObj="item" btnTitle="查看试题" @interviewBtn="handleRightBtnClick"/>
    
    <view>
      <view> 
        <view class="search">
          <view class="order" @click="clickOrder">
            <view>{{ currentOption.label }}</view>
            <view class="order-img"></view>
          </view>
          <u-search
            placeholder="请输入姓名或手机号"
            class="library-u-search"
            v-model="keyword"
            height="80"
            bg-color="#FFF;"
            maxlength="20"
            :show-action="true"
            :clearabled="false"
            @search="handleSearch"
            @custom="handleSearch"
          ></u-search>
        </view>
      </view>

      <view class="orderView"  v-if="showOrder">
        <scroll-view :scroll-y="true" class="searchResult">
          <view class="resultList">
            <view class="resultItem" v-for="(item, index) in options" :key="index" @click.stop="clickOrdeCell(item)">
              <view class="resultTitle">{{ item.label }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
      

      <!-- <u-dropdown @close="closeOptions" ref="uDropdown">
        <u-dropdown-item
          v-model="optionValue"
          :title="optionLabel"
          :options="options"
        ></u-dropdown-item>
      </u-dropdown> -->

      <scroll-view
        class="scrollView"
        scroll-y
        enable-flex
        @scrolltolower="loadMore"
        :refresher-triggered="triggered"
      >
        <view
          class="allContaienr"
          @click="clickCell(item)"
          v-for="(item, index) in list"
          :key="index"
        >
          <view>
            <view class="itemName">{{ item.personName }}</view>
            <view class="itemText">{{ item.personPhone }}</view>
            <view class="itemText"
              >面试时间：{{getMdate(item.interviewStartTime)}}</view
            >
            <view class="itemText"
              >面试时长：{{ item.interviewTotalTime }}</view
            >
          </view>
          <view class="red">{{ item.socre }}分</view>
        </view>

        <u-loadmore
          v-if="list.length > 0 || !loaded"
          class="list-more"
          :status="moreLoading"
          :load-text="loadText"
        />
        <Empty
          v-if="loaded && list.length <= 0"
          :baseImg="emptyImg"
          text="暂无数据"
          :fontWeight="400"
        />
      </scroll-view>
    </view>


    <u-popup v-model="questionsShow" mode="bottom" height="70%" border-radius="14">
      <view class="list-content">
        <view class="content-title">面试题目</view>
        <scroll-view scroll-y="true" style="height: auto; background-color: #F7F8FA;">
          <view class="content-cell" v-for="(item, index) in questions" :key="index">
            <view class="content-text">{{ index+1}} 、{{ item.questionTitle }}</view>
            <u-line color="rgb(240, 239, 239)" />
            <view class="content-btn" @click.stop="showAnswer(item)">查看答案</view>
          </view>
        </scroll-view>
      </view>
    </u-popup>

    <u-popup v-model="answerShow" mode="bottom" height="60%" border-radius="14">
      <view class="answer-content">
        <view class="font-bold">题目</view>
        <view class="answer-text"
          >{{ answer.questionTitle }}</view
        >
        <view class="font-bold">参考答案</view>
        <view class="answer-text"
          >{{ answer.questionStandardAnswer }}</view
        >
      </view>
    </u-popup>


  </page-wrap>
</template>

<script>
import common from '@/api/common.js';
import InterviewCell from "./components/InterviewCell.vue";
import Empty from "@/components/Empty.vue";
import InterViewNavbg from "./components/InterViewNavbg.vue";
import { getCompanyInterviewResultList,getCompanyInterviewIssues } from "@/api/modules/company";
export default {
  components: {
    Empty,
    InterviewCell,
    InterViewNavbg
  },
  data() {
    return {
      showOrder:false,
      topHeight: getApp().globalData.topHeight,
      keyword: "",
      list: [],
      companyId: uni.getStorageSync("company-id"),
      item: {},
      pageParams: {
        pageNo: 1,
        pageSize: 10,
      },
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      searchIcon: this.$imgBaseSelf + "common/search.png",
      finished: false,
      loading: false,
      moreLoading: "loadmore",
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      loaded: false,

      optionValue: 1,
      optionLabel: "按得分升序",
      optionType: "score_asc",
      currentOption:{
        label: "按得分升序",
        value: 1,
        type: "score_asc",
      },
      options: [
        {
          label: "按得分升序",
          value: 1,
          type: "score_asc",
        },
        {
          label: "按得分降序",
          value: 2,
          type: "score_desc",
        },
        {
          label: "按时间升序",
          value: 3,
          type: "start_time_asc",
        },
        {
          label: "按时间降序",
          value: 4,
          type: "start_time_desc",
        },
        // {
        //   label: "按时间由短到长",
        //   value: 5,
        //   type: "total_time_asc",
        // },
        // {
        //   label: "按时间由长到短",
        //   value: 6,
        //   type: "total_time_desc",
        // },
      ],

      questionsShow: false,
      questions: [],
      answerShow: false,
      answer: {},
    };
  },
  onLoad: function(options) {
    if (options && options.data) {
      const data = JSON.parse(options.data);
      this.item = data;
      console.log("🚀 ~ file: interviewScore.vue:99 ~ data:", data);
    }
  },
  mounted() {
    this.getData(false);
  },
  methods: {
    getMdate(date) {
      return common.getMinuteTime(date) 
    },
    loadMore() {
      this.getData(true);
    },
    onRestore() {
      this.triggered = false;
      this._triggered = false;
    },
    onRefresh() {
      if (this._triggered) return;
      this._triggered = true;

      if (!this.triggered) {
        this.triggered = true;
      }
      this.getData(false);
    },
    getData(isMore) {
      if (!this.companyId) return;
      if (this.moreLoading == "loading") return;
      if (this.moreLoading == "nomore" && isMore) {
        return;
      }
      if (!isMore) {
        this.pageParams.pageNo = 1; // 刷新数据
      }
      const params = {
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
        queryParam: this.keyword,
        id: this.item.id,
        orderType: this.currentOption.type,
      };
      this.moreLoading = "loading";
      getCompanyInterviewResultList(params)
        .then((res) => {
          this.moreLoading = "loadmore";
          this.loaded = true;
          if (res.code == 200) {
            if (isMore) {
              this.list.push(...res.data);
            } else {
              this.list = res.data;
            }
            this.pageParams.pageNo++;
            if (this.pageParams.pageNo > res.pageparam.pages) {
              this.moreLoading = "nomore";
            }
          } else {
            this.moreLoading = "nomore";
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .catch((e) => {
          console.log(e);
          this.moreLoading = "nomore";
        })
        .finally(() => {
          this.triggered = false;
          this._triggered = false;
        });
    },
    handleSearch(value) {
      this.showOrder = false;
      this.keyword = value;
      this.getData(false);
    },

    clickCell(item) {
      this.showOrder = false;
      uni.navigateTo({
        url: "/pagesSub/companyCenter/interviewAI/interviewResult?objId=" + item.id
      });
    },

    handleRightBtnClick() {
      this.showOrder = false;
      this.getQuestions();
    },

    closeOptions(index) {
      const result = this.options.find((item) => item.value === this.optionValue);
      console.log(result);
      this.optionLabel = result.label;
      this.optionType = result.type;

      // 关闭的时候，给当前项加上高亮
      // 当然，您也可以通过监听dropdown-item的@change事件进行处理
      this.$refs.uDropdown.highlight(index);

      this.getData(false);
    },


    getQuestions() {
      let param = {
        id: this.item.id,
        hasAnswer:"true"
      };
      getCompanyInterviewIssues(param).then((res) => {
        if (res && res.code == 200) {
          this.questions = res.data;
          this.questionsShow = true;
        } else {
          uni.showToast({
            title: res.status_desc,
            icon: "none",
          });
        }
      });
    },
    showAnswer(item) {
      this.answer = item;
      this.answerShow = true;
      this.showOrder = false;
    },

    clickOrder() {
      this.showOrder = !this.showOrder;
    },
    clickOrdeCell(item) {
      console.log("🚀 ~ file: interviewScore.vue:337 ~ clickOrdeCell ~ item:", item)
      this.showOrder = false;
      this.currentOption =  item;
      this.getData(false);
    }
  },
};
</script>

<style lang="scss" scoped>
$img-base-cdetail: $img-base + "cdetail/";

.top {
  position: fixed;
  top: 0;
  width: 100%;
  height: 20%;
  z-index: -1;
  background: linear-gradient(360deg, #f7f8fa 0%, #ffddcc 100%);
}

.search {
  margin: 0 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.order {
  width: 200rpx;
  text-align: center;
  height: 70rpx;
  line-height: 2.5;
  display: flex;
  align-items: center;
  justify-content: space-around;

  &-img {
    width: 32rpx;
    height: 32rpx;
    background-image: url($img-base-cdetail + "more.png");
    background-size: 100% 100%;
    transition: transform 0.4s;

    &-on {
      transform: rotate(-180deg);
    }
    &-off {
      transform: rotate(0deg);
    }
  }

}

.orderView {
  background-color: white;
  height: 430rpx;
  width: 300rpx;
  border-radius: 10rpx;
  box-shadow: 0 0 10rpx $shadow-color;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  margin-top: 10rpx;
  padding: 20rpx;
  z-index: 100;
  position: absolute;
  margin-left: 20rpx;
}

.searchResult {
  width: 100%;
  background-color: #fff;
  bottom: -120rpx;
  height: 100%;
  overflow: scroll;
  .resultList {
    overflow: scroll;
    .resultItem {
      padding: 20rpx 16rpx;
      border-bottom: 1px solid #f5f5f5;
      &:last-of-type {
        border-bottom: 0;
      }
      .resultTitle {
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 40rpx;
        margin-bottom: 16rpx;
        .light {
          color: #f75a3e;
        }
      }
    }
  }
}

.scrollView {
  box-sizing: border-box;
  height: calc(100vh - 580rpx);
}

.allContaienr {
  display: flex;
  background: white;
  border-radius: 32rpx;
  justify-content: space-between;
  flex-direction: row;
  padding: 32rpx;
  margin: 32rpx;
  align-items: center;
  .itemName {
    font-size: 16px;
    color: #222222;
  }
  .itemText {
    margin-top: 10rpx;
    font-size: 12px;
    color: #888888;
  }
  .itemTime {
    margin-top: 12rpx;
    font-size: 12px;
    color: #888888;
  }

  .itemResultNum {
    margin-top: 20rpx;
    font-size: 12px;
    color: #888888;
  }

  .itemContent {
    display: flex;
    flex-direction: column;
  }

  .red {
      color: #F75A3E;
      font-size:40rpx;
    }
}


.list-content {
  background-color: #F7F8FA;
  height: 100%;

  .content-title {
    height: 120rpx;
    font-weight: bold;
    text-align: center;
    padding-top: 50rpx;
    font-size: 36rpx;
  }
  .content-cell {
    background-color: white;
    margin: 10rpx 30rpx;
    padding: 20rpx;
    border-radius: 20rpx;
  }
  .content-text {
    margin-bottom: 30rpx; 
    font-size: 32rpx; 
    font-weight: 800;
  }
  .content-btn {
    text-align: center;
    margin: 20rpx 0rpx;
    color: #F75A3E;
  }
}


.answer-content {
  margin: 64rpx 32rpx;

  .font-bold {
    font-weight: bold;
    font-size: 36rpx;
    margin-top: 64rpx;
    margin-bottom: 24rpx;
    color: #222222;
  }

  .answer-text {
    color: #222222;
    font-size: 30rpx;
  }
}


</style>
